<template>
  <div class="app-container">
    <div class="searchBox">
      <el-form :inline="true" :model="search" ref="searchForm">
        <el-form-item label="名称：" prop="name">
          <el-input v-model="search.name" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="编码：" prop="code">
          <el-input v-model="search.code" name="code" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item style="margin-top: -2px">
          <el-button type="primary" @click="$refs['qmTable'].fetchListData()">查询</el-button>
          <el-button type="info" @click="search = {};$refs['qmTable'].fetchListData()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <qm-table
      ref="qmTable"
      :urls="urls"
      keyProp="id"
      :formOptions="{ labelWidth: '120px' }"
      :rules="rules"
      :beforeQuery="beforeQuery"
      :afterQuery="afterQuery"
       menuType="text"
    >
      <qm-table-column field="name" sortable>中文名称</qm-table-column>
      <qm-table-column field="code" sortable>编码</qm-table-column>
      <qm-table-column
        field="isEncode"
        fieldtype="enum"
        :enumOptions="[
          { key: '是', value: true },
          { key: '否', value: false },
        ]"
        sortable
        width="100px"
      >是否加密</qm-table-column>
      <!-- <qm-table-column field="isEncode" fieldtype="yesno" sortable>是否加密</qm-table-column> -->
      <qm-table-column field="value" sortable>参数值</qm-table-column>
      <qm-table-column field="category" sortable>分类</qm-table-column>
      <qm-table-column field="isEnabled" fieldtype="enabledisable" sortable width="100px">是否启用</qm-table-column>
      <qm-table-column field="updatedDate" fieldtype="datetime" sortable>更新时间</qm-table-column>

      <template v-slot:form="{ model, viewModel, controlData }">
        <el-row>
          <el-col :span="12">
            <el-form-item label="中文名称：" prop="model.name">
              <el-input v-model="model.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="编码：" prop="model.code">
              <el-input v-model="model.code"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="是否加密：" prop="model.isEncode">
              <el-radio v-model="model.isEncode" :label="true">是</el-radio>
              <el-radio v-model="model.isEncode" :label="false">否</el-radio>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="参数值：" prop="model.value">
              <el-input v-model="model.value"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="分类：" prop="model.category">
              <el-select v-model="model.category" placeholder="请选择">
                <el-option
                  v-for="item in controlData.SysparameterOptions"
                  :key="item.itemId"
                  :label="item.name"
                  :value="item.name"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否启用：" prop="model.isEnabled">
              <el-radio v-model="model.isEnabled" :label="true">是</el-radio>
              <el-radio v-model="model.isEnabled" :label="false">否</el-radio>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注：" prop="model.memo">
              <el-input type="textarea" v-model="model.memo"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="扩展1：" prop="model.reserved1">
              <el-input v-model="model.reserved1"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="扩展2：" prop="model.reserved2">
              <el-input v-model="model.reserved2"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="扩展3：" prop="model.reserved3">
              <el-input v-model="model.reserved3"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="viewModel.pageAction === 'view'">
          <el-col :span="12">
            <el-form-item label="创建时间：" prop="model.createdDate">
              <el-date-picker type="datetime" v-model="model.createdDate" style="width: 100%"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="更新时间：" prop="model.updatedDate">
              <el-date-picker type="datetime" v-model="model.updatedDate" style="width: 100%"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </template>
    </qm-table>
  </div>
</template>

<script>
import Controller from "@/libs/framework/controller";
import _ from "lodash";

export default class Instance extends Controller {
  onBeforeInit() {
    this.urls = {
      model: "/admin/sysParameter/getListModel",
      query: [{ url: "/admin/sysParameter/query", method: "post" }],
      //   save: "/admin/sysParameter/save",
      //   delete: "/admin/sysParameter/delete",
      //   entity: "/admin/sysParameter/getEntity",
    };
  }

  mixin() {
    return {
      data() {
        return {
          search: {},
          rules: {
            "model.name": [
              {
                required: true,
                message: "请输入参数名称",
                trigger: "blur",
              },
            ],
            "model.code": [
              {
                required: true,
                message: "请输入参数编码",
                trigger: "blur",
              },
            ],
            "model.isEncode": [
              {
                required: true,
                message: "请选择是否加密",
              },
            ],
            "model.value": [
              {
                required: true,
                message: "请输入参数值",
                trigger: "blur",
              },
            ],
            "model.isEnabled": [
              {
                required: true,
                message: "请选择是否启用",
              },
            ],
          },
          // urls: {
          //   query: { url: "/admin/sysParameter/query", method: "post" },
          //   save: "/admin/sysParameter/save",
          //   delete: "/admin/sysParameter/delete",
          //   entity: "/admin/sysParameter/getEntity",
          // },
        };
      },
      methods: {
        beforeQuery(params) {
          // params.query.name = 'SA';
          // params.length = 2;
          _.extend(params.query, this.search);
        },
        afterQuery(isSuccess, result) {
          // console.log(isSuccess, result);
        },
      },
    };
  }
}
</script>

<style scoped lang="scss">
</style>

